<style>
	.p {font-size: 16px;}
</style>

<template>
	<div class="navbar navbar-default" role="navigation">
	    <div>
	        <div class="navbar-header">
	            　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
	            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
	                <span class="sr-only">Toggle Navigation</span>
	                <span class="icon-bar"></span>
	                <span class="icon-bar"></span>
	                <span class="icon-bar"></span>
	            </button>
	            <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
	            <a href="" class="navbar-brand">
	                <!-- <i class="glyphicon glyphicon-book"></i>
	                课堂问答系统 -->
	                <img src="img/quiz.png" alt="quiz">
	            </a>
	        </div>
	        <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
	        <div class="collapse navbar-collapse navbar-responsive-collapse">
	            <ul class="nav navbar-nav">
	                <li><a href="">首页</a></li>
	                <li><a href="#">移动版</a></li>
	                <li><a href="#">关于我们</a></li>
	                <li><a href="#">帮助</a></li>
	            </ul>
	            <ul class="nav navbar-nav pull-right">
	                <li v-if="user.name"><a href="/Class/classes.html">进入班级 <i class="fa fa-long-arrow-right"></i></span></a></li>
	                <template v-else>
	                    <li><a href="/Account/login.html"><span class="glyphicon glyphicon-log-in"></span> 登陆</a></li>
                    	<li><a href="/Account/register.html">注册</a></li>
	                </template>
	            </ul>
	        </div>
	    </div>
	</div>
</template>

<script>
	import auth from '../../Component/Auth/auth.js';
	export default {
		data: function() {
			return {
				user: auth.getInfo()
			}
		}
	}
	
</script>

<style>
	.navbar-brand {
		padding: 10px 0 10px 15px;
	}
	.navbar-brand img {
		width: 60px;
	}
</style>